<template>
  <div class="drug-container">
    <div class="drug-search">
      <el-input v-model="searchText" placeholder="请输入药品名称、拼音码、五笔码进行搜索" clearable suffix-icon="el-icon-search" @change="handleSearch" />
    </div>
    <div style="font-size: 16px;color: red;margin: 0.5rem 0;text-align: left;">双击列表中的药品可添加到处方</div>
    <div class="drug-list">
      <el-table ref="table" :data="drugList" :show-header="false" border stripe :max-height="tableHeight" :height="tableHeight" @row-dblclick="handleRowDblclick" empty-text="暂无数据">
        <el-table-column width="0">
          <template slot-scope="scope">
            <div class="durg-content">
              <div class="first-line">
                <div class="durg-type">{{ scope.row.name }}</div>
                <div class="durg-name">{{ scope.row.spec }}</div>
                <div class="durg-name">{{ scope.row.unit_name }}</div>
              </div>
              <div class="second-line">
                <div>用法：</div>
                <div class="doage">{{ scope.row.medi_doage }}{{ scope.row.medi_unit_name }}/次</div>
                <div class="use-type">{{ scope.row.use_type_name }}</div>
                <div class="medi-pass">{{ scope.row.medi_pass_name }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getDrugList } from '@/api/drug'

export default {
  name: 'Drug',
  data() {
    return {
      tableHeight: 200,
      searchText: '',
      drugList: [],
      drugList1: [{
        medi_mark_id: 410,
        name: '甲 三九胃泰颗粒',
        spec: '20g*6包//华润三九',
        medi_pass: 5,
        medi_pass_name: '口服',
        use_type_id: 2,
        use_type_name: '一天二次',
        unit_id: 4,
        unit_name: '盒',
        medi_doage: 1,
        medi_unit_id: 9,
        medi_unit_name: '包',
        resale_price: 15
      }, {
        medi_mark_id: 413,
        name: '甲 三九胃泰颗粒（无糖型）',
        spec: '2.5g*10包//华润三九',
        medi_pass: 5,
        medi_pass_name: '口服',
        use_type_id: 2,
        use_type_name: '一天二次',
        unit_id: 4,
        unit_name: '盒',
        medi_doage: 1,
        medi_unit_id: 9,
        medi_unit_name: '包',
        resale_price: 21
      }, {
        medi_mark_id: 3122,
        name: '甲 三九胃泰颗粒',
        spec: '20g*10s/三九医药',
        medi_pass: 5,
        medi_pass_name: '口服',
        use_type_id: 2,
        use_type_name: '一天二次',
        unit_id: 4,
        unit_name: '盒',
        medi_doage: 1,
        medi_unit_id: 9,
        medi_unit_name: '包',
        resale_price: 25
      }]
    }
  },
  mounted() {
    // 设置表格高度（自适应）
    this.calcTableHeight()
    window.addEventListener('resize', () => {
      this.calcTableHeight()
    })
    // 触发一次resize事件
    const myEvent = new Event('resize')
    window.dispatchEvent(myEvent)
  },
  methods: {
    handleSearch() {
      if (this.searchText.trim() === '') {
        this.drugList = []
      } else {
        getDrugList({ keyword: this.searchText }).then(res => {
          this.drugList = res.data.dataList
        })
      }
    },
    handleRowDblclick(row, column, event) {
      this.$emit('selectDrug', row)
    },
    calcTableHeight() {
      this.$nextTick(() => {
        if (this.$refs.table) {
          this.tableHeight = this.$refs.table.$el.parentElement.offsetHeight 
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.drug-container {
  overflow-y: auto;
  .drug-search{
    margin-bottom: 0.5rem;
  }
  .drug-list {
    font-size: 12px;
    height: calc(100% - 4.5rem);
    .durg-content {
      .first-line {
        display: flex;
        justify-content: space-between;
      }
      .second-line {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
